svelte store

basic usage

// state.js
export const a = writable('initial');

// component.svelte
a.update('updated'); // 갱신 방법
a.set('initial'); // set

let state; // 로컬 state

const unsubscribe = a.subscribe(value = {state = value});

onDestroy(unsubscribe);

auto-sub / unsub

import 후에 $를 사용한다.

<h1>The count is {$a}</h1>

readable

readonly state 선언시

export const time = readable(new Date(), function start(set) {
    const interval = setInterval(() => {
        set(new Date());
    }, 1000);

    return function stop() {
        clearInterval(interval);
    };
});

derived

export const elapsed = derived(
    time,
    $time => Math.round(($time - start) / 1000)
);

// another ex
import { derived } from 'svelte/store';

const summed = derived([a, b], ([$a, $b]) => $a + $b);

const delayed = derived([a, b], ([$a, $b], set) => {
    setTimeout(() => set($a + $b), 1000);
});

// component.svelte
$elapsed